<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米首页</title>
		<link rel="stylesheet" href="CSS/header.css">
		<link rel="stylesheet" href="CSS/main.css">
		<link rel="stylesheet" href="CSS/footer.css">
	
	</head>
	<body>
		<!-- 按照粗刀，将网页分成三个部分：页头、主体、页尾
		     结构化标记替代结构
			 页头----header元素------结构化标记---有利于SEO优化
			 主要完成：导航栏、登录、购物车等
			 主体----main元素-------结构化标记------有利于SEO优化
			 页尾----footer元素------结构化标记---有利于SEO优化
			 根据页头、主体、页尾设定三个外部样式
		 -->
		 <!--1.页面头部 -->
		 <header>
			 <div id="wrapper">
			 	<div class="left">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">小米网移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#"  class="fix2">Select Region</a></li>
					</ul>
				</div>
			 	<div class="right">
					<ul>
						<!-- i元素：行元素，一行内显示，精灵图icon，内边距 撑开 -->
						<li class="ul_right" class="fix"> <i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
						<li><a href="#" class="fix">注册</a></li>
						<li><a href="#">登录</a></li>
						
						
					</ul>
				</div>
			 </div>
		 </header>
		 <!-- 页面主体---->
		 <main>
			 <!-- 面包屑导航---结构化标记--nav元素：导航-->
			<nav id="wrapper2">
				<div class="art">
					<ul>
						<li><img src="img/donghua.gif" alt=""></li>
						<li><img src="../MI/img/LOGO.png" alt=""></li>
						
					</ul>
				</div>
				<div class="left2">
					<ul>
						<li><a href="#">小米盒子</a></li>
						<li><a href="#">红米</a></li>
						<li><a href="#">平板</a></li>
						<li><a href="#">电视</a></li>
						<li><a href="#">盒子</a></li>
						<li><a href="#">路由器</a></li>
						<li><a href="#">智能硬件</a></li>
						<li><a href="#">服务</a></li>
						<li><a href="#">社区</a></li>
					</ul>
				</div>
				<div class="right2">
					<div>
						<ul>
							<li class="sou"><img src="img/search.png" alt="" /><a href="#"></a></li>
							
							<span>平衡车</span>
							<span>小米手机4c</span>
						</ul>	
						
					</div>
				</div>
			</nav>
			<div id="nav_left_container">
				<!-- 左栏 article元素 -->
				<article class="sidebar">
				<div class="outer">
					<ul class="sidebar2">
					<li>手机 平板 电话卡</li>
				<li>电视 盒子   ></li>
				<li>路由器 智能硬件</li>
				<li>移动电源 插线板</li>
				<li>耳机 音响</li>
				<li>电池 存储卡</li>
				<li>保护套 后</li>
				<li>壁膜</li>
				<li>其他</li>
				<li>其他周边</li>
				</ul>
				</div>
				
				</article>
				<!-- 轮播图区 -->
				<figure class="lunbo">
					轮播图区
				</figure>
			</div>
			<section id="f1">
				<div class="x">
					<img src="img/left.png" alt="" class="x2">
					<img src="img/subnav_icon01.png" alt="" class="x1">
					<img src="img/subnav_icon02.jpg" alt="" class="x1">
					<img src="img/subnav_icon03.png" alt="" class="x1">
				</div>
			</section>
			<section id="f2">
				<div class="x3"><p>小米明星单品</p></div>
				<div class="x4">
					<dl class="t1">
						<img src="img/chazuo.png" alt="" />
						<dt class="w1">小米智能插座 基础版</dt>
						<dt class="w2">手机远程遥控，让普通电器变智能</dt>
						<dd class="w3">49元</dd>
						
					</dl>
					<dl class="t2">
						<img src="img/jinghuaqi.png" alt="" >
						<dt class="j1">小米空气净化器2</dt>
						<dd class="j2">净化能力高达</dd>
						<dd class="j3">699元</dd>
					</dl>
					<dl class="t3">
						<img src="img/chaban.png" alt="">
						<dt class="j4">小米智能插线板</dt>
						<dd class="j5">手机远程控制家中电器 智能节电</dd>
						<dd class="j6">69元</dd>
					</dl>
					<dl class="t4">
						<img src="img/erji.png" alt="">
						<dt class="j7">小米圈铁耳机</dt>
						<dd class="j8">动圈+动铁 双发声单元</dd>
						<dd class="j9">69元</dd>
					</dl>
					<dl class="t5">
						<img src="img/luyouqi.png" alt="">
						<dt class="z1">小米路由器 青春版</dt>
						<dd class="z2">将高性能路由器，凝聚于掌心大小</dd>
						<dd class="z3">79元</dd>
					</dl>
				</div>
			</section>
			<section id="f3">
				<div class="x5"><p>智能硬件</p></div>
				<div class="a1">
					<dl class="m1">
						<img src="img/haraware_kid.png" alt="">
					    <dt class="w11">米兔儿童电话手表</dt>
						<dd class="w12">安全防走失，宝贝的安全护卫</dd>
						<dd class="w13">299元</dd>
					</dl>
					<dl class="m2">
						<img src="img/haraware_tizhongcheng.png" alt="">
						<dt class="w14">小米体重秤</dt>
						<dd class="w15">高精度体重传感器，手机管理全家健康</dd>
						<dd class="w16">99元</dd>
					</dl>
					<dl class="m3">
						<img src="img/haraware_luyouqi.png" alt="">
						<dt class="w17">小米路由器3</dt>
						<dd class="w18">更安全，更稳定，安全发育</dd>
						<dd class="w19">149元</dd>
					</dl>
					<dl class="m4">
						<img src="img/haraware_shouhuan.png" alt="">
						<dt class="w20">小米手环 光感版</dt>
						<dd class="w21">实时监测心率，科学运动</dd>
						<dd class="w22">99元</dd>
					</dl>
					<dl class="m5">
						<img src="img/haraware_anfang.png" alt="">
						<dt class="w23">小米智能安防套装</dt>
						<dd class="w24">智能警戒，为您的家增添一份安心</dd>
						<dd class="w25">699元</dd>
					</dl>
					<dl class="m6">
						<img src="img/haraware_xiaoyi.png" alt="">
						<dt class="w26">小米运动相机</dt>
						<dd class="w27">边玩边路边拍，手机随时分享</dd>
						<dd class="w28">399元</dd>
					</dl>
					<dl class="m7">
						<img src="img/haraware_xieya.png" alt="">
						<dt class="w30">智能血压计（蓝牙版）</dt>
						<dd class="w31">送给父母的健康礼物</dd>
						<dd class="w32">199元</dd>
					</dl>
					<dl class="m8">
						<img src="img/haraware_shexiangtou.png" alt="">
						<dt class="w33">小米智能摄像机（夜视版）</dt>
						<dd class="w34">能看能听能说，手机远程观看</dd>
						<dd class="w35">149元</dd>
					</dl>
					<dl class="m9">
						<img src="img/haraware_light.png" alt="">
						<dt class="w36">Yeelight床头灯</dt>
						<dd class="w37">触摸式操作，给卧室1600万种颜色</dd>
						<dd class="w38">699元</dd>
					</dl>
				</div>
			</section>
			<section id="f4">
				<div class="x6">
					<p>搭配</p>
					<ul>
						<li><a href="#"></a>电池储蓄卡</li>
						<li><a href="#"></a>电源</li>
						<li><a href="#"></a>耳机音箱</li>
						<li><a href="#"></a>热门</li>
						
						
						
					</ul>
					</div>
				<div class="a2">
					<dl class="r1">
						<img src="img/dapei_icon01.png" alt="">
						<dt class="y1">小米移动电源</dt>
						<dt class="y2">10000mAh，仅名片大小</dt>
						<dd class="y3">69元起</dd>
					</dl>
					<dl class="r2">
						<img src="img/dapei_icon03.png" alt="">
						<dt class="y4">小米路由器3</dt>
						<dt class="y5">更安全，更稳定，安全发售</dt>
						<dd class="y6">149元</dd>
					</dl>
					<dl class="r3">
						<img src="img/haraware_shouhuan.png" alt="">
						<dt class="y7">小米手环 光感版</dt>
						<dt class="y8">实时监测心率，健康运动</dt>
						<dd class="y9">99元</dd>
					</dl>
					<dl class="r4">
						<img src="img/haraware_anfang.png" alt="">
						<dt class="y10">小米智能安防套装</dt>
						<dt class="y11">智能警戒，为您的家增添一份安心</dt>
						<dd class="y12">199元</dd>
					</dl>
					<dl class="r5">
						<img src="img/haraware_xiaoyi.png" alt="">
						<dt class="y13">小米运动相机</dt>
						<dt class="y14">边动边拍，手机智能上传</dt>
						<dd class="y15">299元</dd>
					</dl>
					<dl class="r6">
						<img src="img/dapei_icon02.png" alt="">
						
					</dl>
					<dl class="r7">
						<img src="img/erji.png" alt="">
						<dt class="y16">小米摄像机 夜视版</dt>
						<dt class="y17">能看能听能说，手机远程观看</dt>
						<dd class="y18">149元</dd>
					</dl>
					<dl class="r8">
						<img src="img/luyouqi.png" alt="">
                        <dt class="y21">小米摄像机 夜视版</dt>
					    <dt class="y22">能看能听能说，手机远程观看</dt>
						<dd class="y23">149元</dd>
					</dl>
					<dl class="r9">
						<img src="img/mitv_icon02.jpg" alt="">
						<dt class="y24">小米摄像机 夜视版</dt>
						<dt class="y25">能看能听能说，手机远程观看</dt>
						<dd class="y26">149元</dd>
					</dl>
					<dl class="r10">
						<img src="img/erji.png" alt="">
						<dt class="y27">小米耳机</dt>
						<dt class="y28">聆听</dt>
						<dd class="y29">29元</dd>
					</dl>
					<dl class="r11">
						<img src="img/video_play.png" alt="">
						<dt class="y30">浏览更多</dt>
						<dt class="y31">热门</dt>
						<dd class="y32"></dd>
					</dl>
				</div>
			</section>
			<section id="f5">
				<div class="x7">
					<p>周边</p>
	
										
					<ul>
						<li><a href="#"></a>箱包</li>
						<li><a href="#"></a>生活周边</li>
						<li><a href="#"></a>米兔</li>
						<li><a href="#"></a>服装</li>
						<li><a href="#"></a>热门</li>
											
					</ul>										
					</div>											
					<div class="a3">
						<dl class="b1">
							<img src="img/peijian_icon01.png" alt="">
							<dt></dt>
							<dt></dt>
							<dd></dd>
						</dl>
						<dl class="b2">
							<img src="img/dianfanbao_icon04.jpg" alt="">
							<dt class="zz1">小米鼠标垫 小号</dt>
						    <dd class="zz2">49元</dd>
							<dd class="zz3">1111人评价</dd>
						</dl>
						<dl class="b3">
							<img src="img/peijian_icon04.png" alt="">
						    <dt class="zz4">小米皮质记事本</dt>
						    <dd class="zz5">39元</dd>
							<dd class="zz6">1451人评价</dd>
						</dl>
						<dl class="b4">
							<img src="img/peijian_icon05.png" alt="">
							<dt class="zz7">小米LED随身灯</dt>
						    <dd class="zz8">320元</dd>
							<dd class="zz9">5543人评价</dd>
						</dl>
						<dl class="b5">
							<img src="img/peijian_icon06.png" alt="">
							<dt class="zz11">手机支架 小蜜蜂</dt>
							<dd class="zz12">29元</dd>
							<dd class="zz13">765人评价</dd>
						</dl>
						<dl class="b6">
							<img src="img/peijian_icon02.png" alt="">
							<dt class="zz11"></dt>
							<dd class="zz12"></dd>
						    <dd class="zz13"></dd>
						</dl>
						<dl class="b7">
							<img src="img/peijian_icon07.png">
							<dt class="zz14">小米防尘塞 MI标</dt>
							<dd class="zz15">10元</dd>
							<dd class="zz16">6756人评价</dd>
						</dl>
						<dl class="b8">
							<img src="img/peijian_icon08.png">
							<dt class="zz17">小米水杯</dt>
							<dd class="zz18">50元</dd>
							<dd class="zz19">787人评价</dd>
						</dl>
						<dl class="b9">
							<img src="img/peijian_icon09.png">
							<dt class="zz21">小米电源线收纳盒</dt>
							<dd class="zz22">55元</dd>
							<dd class="zz23">3445人评价</dd>
						</dl>
						<dl class="b10">
							<img src="img/peijian_icon10.png">
							<dt class="zz24">小米鼠标垫</dt>
							<dd class="zz25">45元</dd>
						    <dd class="zz26">3445人评价</dd>
						</dl>
					</div>						

					
					
					
					
					
				
				
	
			</section>
			<section id="f6">
				<div class="x8">
					
					<p>配件</p>
					<ul>
						<li><a href="#"></a>其他配件</li>
						<li><a href="#"></a>贴膜</li>
						<li><a href="#"></a>后盖</li>
						<li><a href="#"></a>保护套</li>
						<li><a href="#"></a>热门</li>
																
					<ul>		
					</div>
					<div class="a4">
						<dl class="m1">
							<img src="img/zhoubian_icon01.png" alt="">
						</dl>
						<dl class="m2">
							<img src="img/zhoubian_icon03.png" alt="">
							<dt class="qq1">小米自拍杆</dt>
							<dd class="qq2">49元</dd>
							<dd class="qq3">2634人评价</dd>
						</dl>
						<dl class="m3">
							<img src="img/zhoubian_icon04.png" alt="">
							<dt class="qq4">小米手机5 钢化膜</dt>
							<dd class="qq5">100元</dd>
							<dd class="qq6">653人评价</dd>
						</dl>
						<dl class="m4">
							<img src="img/zhoubian_icon05.png" alt="">
						    <dt class="qq7">红米手机3 钢化膜</dt>
							<dd class="qq8">100元</dd>
							<dd class="qq9">9.1万人评价</dd>
						</dl>
						<dl class="m5">
							<img src="img/zhoubian_icon06.png" alt="">
							<dt class="qq11">小米周边贴膜（两片装）</dt>
							<dd class="qq12">59元</dd>
							<dd class="qq13">6万人评价</dd>
						</dl>
						<dl class="m6">
							<img src="img/zhoubian_icon02.png" alt="">
							
						</dl>
						<dl class="m7">
							<img src="img/zhoubian_icon07.png" alt="">
							<dt class="qq14">小米随身WIFI</dt>
							<dd class="qq15">199元</dd>
							<dd class="qq16">5.1万人评价</dd>
							</dl>
						<dl class="m8">
							<img src="img/zhoubian_icon08.png" alt="">
							<dt class="qq17">小米翻盖手机壳</dt>
							<dd class="qq18">29元</dd>
							<dd class="qq19">3.4万人评价</dd>
						</dl>
						<dl class="m9">
							<img src="img/zhoubian_icon09.png" alt="">
							<dt class="qq21">小米灰色手机壳</dt>
							<dd class="qq22">20元</dd>
							<dd class="qq23">1.1万人评价</dd>
						</dl>
						<dl class="m10">
							<img src="img/zhoubian_icon10.png" alt="">
							<dt class="qq24"></dt>
							<dd class="qq25"></dd>
						</dl>
						<dl class="m11">
							<img src="img/arrow_rightbtn.png" alt="">
							<dt class="qq26">查看更多</dt>
							<dd class="qq27">热门</dd>
						</dl>
					</div>
			</section>
			<section id="f7">
				<div class="x9">
					<p>热评产品</p>
				</div>
				<div class="a5">
					<dl class="v1">
						<img src="img/hotproduct_icon01.png" alt="">
						<dt class="h1">超值正品，再也不用担心头那里用久了会坏掉。升级版萌萌哒</dt>
						<dd class="h2">来自 邢大帅的评价</dd>
						<dd class="h3">米兔手机U盘</dd>
						<dd class="h4">49元</dd>
					</dl>
					<dl class="v2">
						<img src="img/hotproduct_icon02.png" alt="">
						<dt class="h5">绝对五星，音质很好，包装也不错，物流也快</dt>
						<dd class="h6">来自 时小念 的评价</dd>
						<dd class="h7">小米活塞耳机</dd>
						<dd class="h8">44.9元</dd>
					</dl>
					<dl class="v3">
						<img src="img/hotproduct_icon03.png" alt="">
						<dt class="h11">做工没的说，摸起来非常细腻，而且比传统插线板要坚固</dt>
						<dd class="h12">来自 邢小依 的评价</dd>
						<dd class="h13">小米插线板</dd>
						<dd class="h14">44元</dd>
					</dl>
					<dl class="v4">
						<img src="img/hotproduct_icon04.png" alt="">
						<dt class="h15">一如既往的发烧体验，炫酷外形，人性设计，动听的音质，高低音表现平衡</dt>
						<dd class="h16">来自 文小邢 的评价</dd>
						<dd class="h17">小米头戴式耳机 标准版</dd>
						<dd class="h18">180元</dd>
					</dl>
				</div>
			</section>
			<section id="f8">
				<div class="x10">
					<p>内容</p>
				</div>
				<div class="a6">
					<dl class="g1">
						<img src="img/classify_icon01.png" alt="">
						<dt class="i1">图书</dt>
						<dd class="i2">阿弥陀佛 么么哒</dd>
						<dd class="i3">大冰新书，12个不舍得谈完的，暖心的，真实的江湖故事</dd>
						<dd class="i4">9.99元</dd>
						</dl>
					<dl class="g2"> 
					   <img src="img/classify_icon02.png" alt="">
					   <dt class="i5">主题</dt>
					   <dd class="i6">主题市场</dd>
					   <dd class="i7">众多个性主题，炫酷桌面，让你的手机与众不同</dd>
					   <dd class="i8">MIUI</dd>
					</dl>
					<dl class="g3">
						 <img src="img/classify_icon03.png" alt="">
						 <dt class="i11">游戏</dt>
						<dd class="i12">米柚手游模拟器</dd>
						 <dd class="i13">在电脑上玩遍小米左右手游</dd>
					     <dd class="i14">免费</dd>
					</dl>
					<dl class="g4">
						 <img src="img/classify_icon04.png" alt="">
						    <dt class="i15">应用</dt>
							<dd class="i16">2015年度应用</dd>
							<dd class="i17">精彩世界，尽情下载</dd>
							<dd class="i18">免费</dd>
					</dl>
				</div>
			</section>
			<section id="f9">
				<div class="x11">
					<p>视频</p>
				</div>
				<div class="a7">
				   <dl class="tt1">
					   <dt class="box1"></dt>
					   <dt class="box2"></dt>
					   <dd class="cc1">笑喷了，沈腾爆笑出演，6集联播</dd>
					    <dd class="cc2">小米Max沈腾爆笑预告全集</dd>
				   </dl>
				   <dl class="tt2">
					   <dt class="box3"></dt>
					   <dt class="box4"></dt>
					   <dd class="cc3">小米2016春季新品发布会</dd>
					    <dd class="cc4">小米5 十余项黑科技亮相</dd>
				   </dl>
				   <dl class="tt3">
					   <dt class="box5"></dt>
					   <dt class="box6"></dt>
					   <dd class="cc5">15秒了解小米5 有多快</dd>
					    <dd class="cc6">华少用超快语速告诉你小米5 到底有多快</dd>
				   </dl>
				   <dl class="tt4">
					   <dt class="box7"></dt>
					   <dt class="box8"></dt>
					   <dd class="cc7">《去探索》 小米年度品牌视频</dd>
					    <dd class="cc8">与小米一起探索黑科技</dd>
				   </dl>
				</div>
			</section>
			
		 </main>
		 <footer>
			 <div id="wrapper3">
				 <div class="up">
					 <div class="weixiu">
						 <ul>
						 	<li class="k1"><i class="sb1"></i><a href="#">1小时快修服务</a></li>
						 	<li class="k2"><i class="sb2"></i><a href="#">7天无理由退货</a></li>
						 	<li class="k3"><i class="sb3"></i><a href="#">15天免费换修</a></li>
						 	<li class="k4"><i class="sb4"></i><a href="#">满150元包邮</a></li>
							<li class="k5"><i class="sb5"></i><a href="#">520余家售后网点</a></li>
						 </ul>
						 </div>
					 <div class="left3">
						 <ul class="tl1">
						 	<li><a href="">帮助中心</a></li>
						 	<li><a href="">服务支持</a></li>
						 	<li><a href="">线下门店</a></li>
						 	<li><a href="">关于小米</a></li>
						 	<li><a href="">关注我们</a></li>
						 	<li><a href="">特色服务</a></li>
						 </ul>
						 <ul class="tl2">
						 	<li><a href="">购物指南</a></li>
						 	<li><a href="">售后政策</a></li>
							<li><a href="">小米之家</a></li>
						 	<li><a href="">了解小米</a></li>
							<li><a href="">新浪微博</a></li>
							<li><a href="">F码通道</a></li>
						 </ul>
						  <ul class="tl3">
						 	<li><a href="">支付方式</a></li>
						 	<li><a href="">自助服务</a></li>
						 	<li><a href="">服务网点</a></li>
						 	<li><a href="">加入小米</a></li>
						 	<li><a href="">小米部落</a></li>
						 	<li><a href="">小米移动</a></li>
						 						 </ul>
												 
						 <ul class="tl4">
						    <li><a href="">配送方式</a></li>
							<li><a href="">相关下载</a></li>
							<li><a href="">线下专区</a></li>
							<li><a href="">联系我们</a></li>
							<li><a href="">官方微信</a></li>
							<li><a href="">防伪查询</a></li>
						 </ul>
					 </div>
					 <div class="right3">
						 <dl>
							 <dt class="xx1">400-100-5678</dt>
							 <dd class="xx2">周一至周日</dd>
							 <dd class="xx3">(仅收市话费)</dd>
						 </dl>
					 </div>
				 </div>
				 <div class="sit">
					 <div class="MI">
					 <ul>
					
						<li><a href="#">小米网</a></li>
					 	<li><a href="#">MIUI</a></li>
					 	<li><a href="#">米聊</a></li>
					 	<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
					 	<li><a href="#">云服务</a></li>
						<li><a href="#">小米网移动版</a></li>
				    	<li><a href="#">问题反馈</a></li>
						<li><a href="#"  class="fix2">Select Region</a></li>
						<li>©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报电话：185-0130-1238本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</li>
					</ul>
					 </div>   
				 </div>
				 <div class="mi"></div>
				 <div class="ll1"> 	
				 <section class="jlt">
					 <ul class="pp1">
						 
					 	<li class="nn1"><img src="img/safe_icon02.png" alt=""></i><a href="">诚信网站</a></li>
					 	<li class="nn2"><img src="img/safe_icon02.png" alt="" /><i clsaa="tu2"></i><a href="">可信网站</a></li>
					 	<li  class="nn3"><img src="img/safe_icon03.png" alt="" /><i clsaa="tu3"></i><a href="">可信交易</a></li>
					 </ul>
					 <ul class="pp2">
					 	<li>示范企业</li>
					 	<li>信用评价</li>
					 	<li>保障中心</li>
					 </ul>
				 </section>
			 </div>
			 
		 </footer>
	</body>
</html>